@charset "utf-8";

@font-face {font-family: "iconfont";
  src: url('iconfont.woff?t=1502264184772') format('woff'); /* iOS 4.1- */
}
body{
  background: #337ab7;
  overflow: hidden;
}
.loader {
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear .25s,opacity .25s linear;
  width:21px;
  height:9px;
  content:url("./img/ajax-loader5.gif");
  z-index:21
}
.progress-bar {
  position:relative;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  position:absolute;
  left:0px;
  right:0;
  height:35px;
  top:0;
  .progress-line {
    width:calc(100% - 45px);
    z-index:1;
    left:45px
  }
  .playpause {
    font-family:iconfont;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    width:1em;
    height:1em;
    cursor:pointer;
    position:absolute;
    font-size:25px;
    top:8px;
    left:10px;
    z-index:10;
    color: white;
  }
  .playpause::before {
    content:"f";
  }
  .pause::before {
    content:"e";
    margin-left:-0.08em
  }
  .playpause:hover {
    opacity:.8
  }
  .calendar {
    position:absolute;
    left:45px;
    right:0;
    top:6px;
    white-space:nowrap;
    div {
      cursor: pointer;
      display:inline-block;
      box-sizing:border-box;
      text-align:left;
      padding: 6px 0 0 8px;
      font-size:12px;
      height:32px;
      white-space:nowrap;
      overflow:hidden;
      background-color:rgba(0,0,0,0.45);
      width: calc(10% - 1px );
    }
    div.clickable {
      color:white;
      margin-left:1px;
    }
    div.clickable:first-child{
      margin-left: 1px;
    }
  }
  .calendar::before {
    display:block;
    position:absolute;
    width:45px;
    height:32px;
    background-color:rgba(0,0,0,0.45);
    content:' ';
    left:-45px;
    z-index:-1
  }
  .progress-line {
    height:6px;
    cursor:pointer;
    position:relative;
    border:10px solid transparent;
    background-clip:padding-box;
    border-right:none;
    border-left:none;
    top:-10px;
    -webkit-transition:width ease-in-out .7s;
    transition:width ease-in-out .7s;
    .played {
      background-color:#9D0300;
      height:6px;
      float:left;
      width:15%
    }
    .avbl {
      height:6px;
      background-color:#d3d3d3;
      width:100%
    }
    i.curr-time{
      display:block;
      width:3px;
      height:6px;
      position:absolute;
      background-color:#e4a600;
      top:0
    }
  }
  .timecode {
    font-size:10px;
    position:absolute;
    display:block;
    box-sizing:border-box;
    top:-2.6em;
    margin-left:-2em;
    .loader {
      position:absolute;
      left:-2.5em;
      top:.6em
    }
    .box {
      cursor:-webkit-grab;
      cursor:-moz-grab;
      cursor:grab;
      position:relative;
      background:white;
      color:black;
      height:2em;
      box-sizing:border-box;
      padding:.3em .8em;
      white-space:nowrap;
      text-align:center;
      display:inline-block;
      font-family:Verdana,sans-serif
    }
    .box::after {
      top:100%;
      left:2em;
      border:solid transparent;
      content:' ';
      height:0;
      width:0;
      position:absolute;
      border-top-color:white;
      border-width:.5em;
      margin-left:-0.5em
    }
  }
  .ghost-timecode {
    transition:.3s opacity 0s;
    -webkit-transition:.3s opacity 0s;
    opacity:0;
    pointer-events:none;
    .box {
      cursor:pointer;
      color:white;
      background-color:#9D0300
    }
    .box::after {
      border-top-color:#9D0300
    }
  }
}
.progress-bar::before, ::after {
  position:absolute;
  top:0;
  height:6px;
  content:' '
}
.progress-bar::before {
  left:0;
  width:45px;
  background-color:#9D0300
}
.progress-bar.anim-allowed{
  .played, .timecode{
    -webkit-transition:all ease-in-out .25s;
    transition:all ease-in-out .25s
  }
}